<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" width="400" height="600">
        <tr>
            <td>
                <input type="checkbox" class="allCheck">
            </td>
            <td>全选</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check">
            </td>
            <td>手机</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check">
            </td>
            <td>电脑</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check">
            </td>
            <td>电视</td>
        </tr>
        <tr>
            <td>
                <input type="button" value="反选">
            </td>
        </tr>
    </table>
    <script>
        // value  表单的内容
        // checked  是否被选中(布尔类型)
        // 获取元素
        var all = document.querySelector(".allCheck");
        var checks = document.querySelectorAll(".check");
        var btrNo = document.querySelector("input[value]")

        // 全选按钮点击
        all.onclick = function () {
            // 如果全选按钮被选中,下边的按钮都被选中
            // 反之,全部不被选中

            // 获取全选按钮的状态
            var status = all.checked;
            console.log(status);

            for (var i = 0; i < checks.length; i++) {
                // console.log(checks[i].checked);
                checks[i].checked = status;
            }
        }

        // 全选按钮联动
        for (var i = 0; i < checks.length; i++) {
            checks[i].onclick = function () {
                // 把flag的值赋值给全选按钮
                // 接收返回值
                var res = select();
                all.checked = res;
            }
        }

        // 反选按钮
        // 小按钮的状态取反
        btrNo.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                // !checks[i].checked
                console.log(checks[i].checked, !checks[i].checked);
                checks[i].checked = !checks[i].checked;
            }

            // 全选按钮联动
            // 把flag的值赋值给全选按钮
            all.checked = select();
        }

        function select() {
            // 判断小按钮是否都被选中
            // 先认定都被选中
            var flag = true;
            for (var j = 0; j < checks.length; j++) {
                // 一旦有一个没被选中,直接变为false
                if (!checks[j].checked) {
                    flag = false;
                    break;
                }
            }

            return flag;

        }
    </script>
</body>

</html>